<template>
    <div style="background-color: rgb(227, 227, 224); height: 100vh;">
        <!-- html 的标签-->
        <div class="header">
            小滴服务
        </div>
        <!-- 轮播操作 -->
        <van-swipe :autoplay="3000" lazy-render>
            <!--循环体 v-for vue中的一循环指令 image 表示当前循环的别名 in 查找  images 是原数组-->
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" width="100%" height="260" />
            </van-swipe-item>
        </van-swipe>
        <!--快捷入口图标-->
        <div class="icon">
            <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
                <van-swipe-item>
                    <van-grid icon-size="43px" :border="false">
                        <van-grid-item :icon="index" text="企业项目" url="https://chat.deepseek.com/" />
                        <van-grid-item :icon="index2" text="平台风采" />
                        <van-grid-item :icon="index3" text="报名流程" />
                        <van-grid-item :icon="index4" text="客户管理" />

                    </van-grid>
                </van-swipe-item>
                <van-swipe-item>
                    <van-grid icon-size="43px" :border="false">
                        <van-grid-item :icon="index5" text="财务管理" url="https://chat.deepseek.com/" />
                        <van-grid-item :icon="index6" text="新闻公告" />
                        <van-grid-item :icon="index3" text="报名流程" />
                        <van-grid-item :icon="index4" text="客户管理" />

                    </van-grid>
                </van-swipe-item>

            </van-swipe>
        </div>
        <!--企业项目合作-->
        <van-swipe-cell style="margin-top: 5px; " 
        v-for="item in mgrData" @click="onClick(item.id)">
            <van-card :num="item.count" :price="item.textname" :desc="item.ptext" :title="item.pname"
                class="goods-card" :thumb="item.imgurl" >
            </van-card>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell>


    </div>

    <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home">小滴服务</van-tabbar-item>
        <van-tabbar-item icon="todo-list" to="/qyhome">企业项目</van-tabbar-item>
        <van-tabbar-item icon="wechat-moments" to="/fwdemo">服务流程</van-tabbar-item>
        <van-tabbar-item icon="graphic" to="/ptfc">平台风采</van-tabbar-item>
        <van-tabbar-item icon="friends" :to="({ name:'myxd'})">我的小滴</van-tabbar-item>
    </van-tabbar>

</template>
<script setup>
import index from '../assets/index1.png'
import index2 from '../assets/index2.png'
import index3 from '../assets/index3.png'
import index4 from '../assets/index4.png'
import index5 from '../assets/index5.png'
import index6 from '../assets/index6.png'
// 编辑的是js的代码
import { ref } from 'vue';
const active = ref(0);
// 轮播的数据
const images = [
    'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bceec83f7a46a2f466064d309424cc1.jpg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];

import {useRouter} from 'vue-router'
const  router = useRouter()
import axios from 'axios'
const mgrData=ref()

//获取 请求数据
const mgrDataApi =async () => { 
    await axios.get('http://localhost:8080/manager').then(res => { 
        console.log(res);
        mgrData.value = res.data
        console.log(mgrData.value);
        
    })
}
// 执行数据
mgrDataApi()
const onClick = () => { 
    console.log('点击了');
    router.push({name:'qyhome',query:{id:123}})
}


</script>



<style scoped>
/* 编辑css的样式 */
.van-tabbar-item {
    font-size: 15px;
}

:deep(.van-tabbar-item__icon) {
    font-size: 30px !important;
}

/* 头部样式 */
.header {
    height: 50px;
    width: 100%;
    background-color: #178d8d;
    font-size: 25px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-weight: 800;
}

.icon {
    width: 98%;
    height: 110px;
    margin: 10px auto;
    background-color: white;
    border-radius: 15px;
}

:deep(.van-grid-item__content--center) {
    border-radius: 15px;
}
 .goods-card {
     margin: 0;
     background-color: white;
 }

 .delete-button {
     height: 100%;
 }
</style>
